*{
    box-sizing: border-box;
}
body{
    height: 100% ;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(bg.jpg);
    background-image: linear-gradient(to bottom,rgba(239, 209, 54, 0.816),rgba(239, 239, 108, 0.214));
    position: relative;
    color: rgba(147, 25, 25, 0.945);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
.navbar{
    border: 2px solid gray;
    position: sticky;
    background-color:rgb(147, 25, 25) ;
    top: 0%;
    z-index: 1;
}
.navbar a {
    color: white;
}
.navbar-toggler{
    background-color: white;
}
.navbar a:hover{
    color: white;
}
.nav-item:hover{
    background-color: rgb(209, 25, 31);
}
.container img{
    width:250px;height:32vh;border-radius: 50%;
}

.map{
    border: 2px solid rgb(9, 192, 9);
    padding: 20px;
}
.map button{
    background-color: rgb(3, 42, 68);
    border: none;
    padding: 20px;
    color: white;
    border-radius: 15px;
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.map a{
    text-decoration: none;
    color: white;
}
.map a:hover{
    color: yellow;
}
.map button:active{
    background-color: rgb(147, 25, 25);
    color: white;
}
@keyframes example {
    0%   {background-color:rgb(147, 25, 25);}
    25%  {background-color:rgb(209, 25, 31);}
    50%  {background-color:rgb(3, 42, 68);}
    75%  {background-color:rgb(239, 209, 54);}
    100% {background-color:rgb(147, 25, 25);}
}
img{
    transition: transform .4s;
}
img:hover{
    transform: scale(1);
    transform: scale(1.03);

}

.hero{
    text-align: center;
}

article figure{
    width: 50%;
    height: 50%;
    float: left;
    padding: 20px;
}
article figcaption{
    text-align: center;
}
article img{
    width: 100%;
    height: 100%;
    float: left;
}

footer{
    text-align: center;
    margin: 70px;
}
main img{
    width: 60%;
    height: 60vh;
    text-align: center;
}
main dl{
    width: 80%;
    margin: auto;
}
footer{
    border-top: 2px solid gray;
    color: black;
    margin: 0%;
    padding: 20px;
    background-color: rgba(239, 239, 108, 0.33);
    position: relative;

}
.end{
    width: 100%;
    height: 100%;
    display: flex;
    font-family:'Times New Roman', Times, serif;
    color: darkolivegreen;
}
.last{
    width: 100%;
    height: 100vh;
    display: flex;

}
.contact{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
        padding: 25px;

}
.exp{
    width: 100%;
    height: 100%;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.b1 , .b2 , .b3 , .b4 , .b5 ,.b6 ,.b7{
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    padding: 50px;
    text-align: center;
}
.b1{
     background-image:linear-gradient(to bottom , rgba(0, 0, 0, 0.405) , rgba(0, 0, 0, 0.389)) , url(top.JPG);
}
.b2{
    background-image: linear-gradient(to bottom , rgba(0, 0, 0, 0.405) , rgba(0, 0, 0, 0.389)) ,url(bed.JPG);
}
.b3{
    background-image: linear-gradient(to bottom , rgba(0, 0, 0, 0.405) , rgba(0, 0, 0, 0.389)) ,url(priv.JPG);
}
.b4{
    background-image: linear-gradient(to bottom , rgba(0, 0, 0, 0.405) , rgba(0, 0, 0, 0.389)) ,url(chill.JPG);
}
.b5{
    background-image: linear-gradient(to bottom , rgba(0, 0, 0, 0.405) , rgba(0, 0, 0, 0.389)) ,url(gate.JPG);
}
.b6{
    background-image: linear-gradient(to bottom , rgba(0, 0, 0, 0.405) , rgba(0, 0, 0, 0.389)) ,url(breeze.JPG);
}